<script setup>
	import { ref } from 'vue'
	import orderList from './components/order-list.vue'
	// 获取安全区域尺寸
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const tabs = [
		{ label: '问医生', type: 1, rendered: true },
		{ label: '极速问诊', type: 2, rendered: false },
		{ label: '开药问诊', type: 3, rendered: false },
	]
	const tabIndex = ref(0)
	function handleTab({ index }) {
		tabIndex.value = index
		if (tabs[index].rendered) return
		// 未渲染
		tabs[index].rendered = true
	}
</script>
<template>
	<view class="consult-page">
		<view class="consult-status-tabs">
			<custom-sticky :offsetTop="safeAreaInsets.top + 'px'">
				<custom-tabs :list="tabs" @changeTab="handleTab"></custom-tabs>
			</custom-sticky>
		</view>
		<view
			v-for="(tab, index) in tabs"
			v-show="tabIndex === index"
			:key="tab.type"
		>
			<!-- 订单列表 -->
			<orderList v-if="tab.rendered" :type="tab.type"></orderList>
		</view>
	</view>
</template>

<style lang="scss">
	.consult-page {
		background-color: #f6f6f6;
		.consult-status-tabs {
			padding: 10rpx 30rpx 0;
			background-color: #fff;
			:deep(.custom-tabs) {
				justify-content: space-evenly;
			}
		}
	}
</style>
